<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 10:28:29
-->
<template>
  <!--1. 容器 -->
  <div ref="Bottom4_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Bullet } from '@antv/g2plot';
export default {
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
   },
   methods:{
    // 3. 初始化图表
    initChart(){
      const data = [
  {
    title: '10:10;',
    ranges: [30, 90, 120],
    measures: [65],
    target: 80,
  },
  {
    title: '10:11',
    ranges: [30, 90, 120],
    measures: [50],
    target: 100,
  },
  {
    title: '10:12',
    ranges: [30, 90, 120],
    measures: [40],
    target: 85,
  },
];
    const bulletPlot = new Bullet(this.$refs.Bottom4_container, {
  data,
  measureField: 'measures',
  rangeField: 'ranges',
  targetField: 'target',
  xField: 'title',
  color: {
    range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
    measure: '#5B8FF9',
    target: '#39a3f4',
  },
  label: {
    measure: {
      position: 'middle',
      style: {
        fill: '#fff',
      },
    },
  },
  xAxis: {
    line: null,
  },
  yAxis: false,
  // 自定义 legend
  legend: {
    custom: true,
    position: 'bottom',
    items: [
      {
        value: '差',
        name: '差',
        marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 3 } },
      },
      {
        value: '良',
        name: '良',
        marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 3 } },
      },
      {
        value: '优',
        name: '优',
        marker: { symbol: 'square', style: { fill: '#bfeec8', r: 3 } },
      },
    ],
  },
});

bulletPlot.render();
    }
  }
}
</script>